import { reactive, onMounted, onUnmounted } from "vue"
// mixins是vue2中的写法,hooks是vue3中的写法
export default function () {
  const point = reactive({
    x: 0,
    y: 0,
  })
  function myPoint(e) {
    point.x = e.pageX
    point.y = e.pageY
  }
  // 在生命周期一开始挂载的时候，就要去注册一个事件
  onMounted(() => {
    document.addEventListener("click", myPoint)
  })

  // 在组件卸载时，销毁事件
  onUnmounted(() => {
    document.removeEventListener("click", myPoint)
  })

  return point
}
